﻿@{
    ViewBag.Title = "字段信息维护";
    Layout = "~/Views/Shared/_LayoutPageBaseEdit.cshtml";
}
@using EIP.Common.Entities.Dtos
@using EIP.System.Models.Enums
@using EIP.Web.AdminLTE.DataUsers.Helpers

@model EIP.System.Models.Dtos.Permission.SystemFieldOutput
<div class="box-body">
    <div class="col-md-12">
        <div class="form-group">
            <label class="col-sm-2 control-label">归属菜单</label>
            <div class="col-sm-10">
                <div class="input-group">
                    <input type="text" id="menuName" value="@Model.MenuName" class="form-control" data-pure-clear-button placeholder="归属菜单">
                    <span id="menuBtn" onclick=" showMenu(); return false; " class="input-group-addon pointer"><i class="fa fa-sitemap"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label m">显示名称</label>
            <div class="col-sm-10">
                <input type="text" name="label" id="label" value="@Model.Label" data-pure-clear-button class="form-control" placeholder="显示名称">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label m">字段名称</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" value="@Model.Name" data-pure-clear-button id="name" name="name" placeholder="字段名称">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label m">排序名称</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" value="@Model.Index" data-pure-clear-button id="Index" name="Index" placeholder="排序名称">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label m">宽度</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" value="@Model.Width" data-pure-clear-button id="Width" name="Width" placeholder="宽度">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label m">排序方式</label>
            <div class="col-sm-10">
                @Html.DropDownListEnum(new DropDownListEnumInput
                {
                    EnumType = (typeof (EnumFieldSortType)),
                    Id = "Sorttype",
                    SelectedVal = @Model.Sorttype,
                    NeedDefault = true,
                    CompareType = EnumCompareType.Text,
                    HtmlAttributes = "class='form-control select2' style='width: 100%;'",
                })
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label m">对齐方式</label>
            <div class="col-sm-10">
                @Html.DropDownListEnum(new DropDownListEnumInput
                {
                    EnumType = (typeof (EnumFieldAlign)),
                    Id = "Align",
                    SelectedVal = @Model.Align,
                    NeedDefault = true,
                    CompareType = EnumCompareType.Text,
                    HtmlAttributes = "class='form-control select2' style='width: 100%;'",
                })
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">选项</label>
            <div class="col-sm-10">
                <label>
                    @Html.CheckBoxHtmlString(new CheckBoxInput
                    {
                        Name = "Hidden",
                        Title = "显示",
                        IsCheck = @Model.Hidden
                    })

                </label>
                <label>
                    @Html.CheckBoxHtmlString(new CheckBoxInput
                    {
                        Name = "CanbeDerive",
                        Title = "导出/打印",
                        IsCheck = @Model.CanbeDerive
                    })
                </label>
                <label>
                    @Html.CheckBoxHtmlString(new CheckBoxInput
                    {
                        Name = "Fixed",
                        Title = "宽度固定",
                        IsCheck = @Model.Fixed
                    })
                </label>


            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label m">格式化</label>
            <div class="col-sm-10">
                @Html.DropDownListEnum(new DropDownListEnumInput
                {
                     EnumType = (typeof(EnumFieldFormatter)),
                    Id = "Formatter",
                    SelectedVal = @Model.Formatter,
                    NeedDefault = true,
                    CompareType = EnumCompareType.Text,
                    HtmlAttributes = "class='form-control select2' style='width: 100%;'",
                })
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label m">排序号</label>
            <div class="col-sm-10">
                <input type="text" value="@Model.OrderNo" name="orderNo" class="form-control" data-pure-clear-button placeholder="排序号">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label m">Sql字段</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" value="@Model.SqlField" data-pure-clear-button id="SqlField" name="SqlField" placeholder="Sql字段">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">备注</label>
            <div class="col-sm-10">
                <textarea class="form-control" name="remark" data-pure-clear-button placeholder="备注">@Model.Remark</textarea>
            </div>
        </div>
    </div>
</div>

@Html.HiddenFor(f => f.FieldId)
@Html.HiddenFor(f => f.MenuId)
<div class="combotree-popup dropdown-menu" id="menuContent" style="display:none;">
    <div class="ip-control">
        <div class="box-tools">
            <div class="input-group" style="width: 272px;padding-left:5px">
                <input type="text" id="searchMenuKey" class="form-control input-sm" placeholder="请输入名称进行模糊查询...">
                <div class="input-group-btn">
                    <a class="btn btn-sm btn-default" id="searchMenu"><i class="fa fa-search"></i></a>
                </div>
            </div>
        </div>
    </div>
    <ul id="menuTree" class="ztree" style="margin-top:0; height: 223px; overflow: auto"></ul>
</div>
<script>
    var form = null;
    $(function () {

        //iCheck for checkbox and radio inputs
        $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
            checkboxClass: 'icheckbox_minimal-blue',
            radioClass: 'iradio_minimal-blue'
        });
        //Red color scheme for iCheck
        $('input[type="checkbox"].minimal-red, input[type="radio"].minimal-red').iCheck({
            checkboxClass: 'icheckbox_minimal-red',
            radioClass: 'iradio_minimal-red'
        });
        //Flat red color scheme for iCheck
        $('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
            checkboxClass: 'icheckbox_flat-green',
            radioClass: 'iradio_flat-green'
        });
        $(".icon-picker").iconPicker();
        $.each($("input:text, input:password, " +
                "input[type='email'], input[type='url'], input[type='search'], input[type='tel'], input[type='number'], " +
                "input[type='datetime'],textarea", $("#editform")),
            function (index, element) {
                var $element = $(element);
                if (($element.attr("data-pure-clear-button") == undefined || $element.attr("data-pure-clear-button") === 'false') && !$element.hasClass("has-pure-clear-button")) {
                    return;
                }
                $element.pureClearButton("create");
            });

        ValidformNeed();

        initForm();
    });

    function initForm() {
        //初始化控件
        form = $("#editform").form();
        //数据校验
        $("#editform").formValidation({
            message: '请输入有效值',
            trigger: 'blur',
            fields: {
                name: {
                    validators: {
                        notEmpty: {
                            message: '请输入姓名'
                        }
                    }
                },
                menuName: {
                    validators: {
                        notEmpty: {
                            message: '请选择归属菜单'
                        }
                    }
                }
            }
        }).on('success.form.fv', function (e) {
            var data = form.getFormSimpleData();
            //获取值
            var formatter = UtilGetDropdownListText("Formatter");
            data["Formatter"] = formatter === "===请选择===" ? "" : formatter;

            var sorttype = UtilGetDropdownListText("Sorttype");
            data["Sorttype"] = sorttype === "===请选择===" ? "" : sorttype;

            var align = UtilGetDropdownListText("Align");
            data["Align"] = align === "===请选择===" ? "" : align;
            UtilAjaxPostWait("/System/Field/SaveField",
          data, function (data) {
              if (DialogAjaxResult(data)) {
                  getGridData();
                  //关闭
                  dialog.close();
              }
          });
            return false;
        });
    }

</script>
<script type="text/javascript">

    var setting = {
        view: {
            dblClickExpand: false
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            onClick: onClick
        }
    };

    function onClick(e, treeId, treeNode) {
        $("#MenuId").val(treeNode.id);
        //加载数据
        $("#menuName").val(treeNode.name);
    }

    function showMenu() {
        var cityObj = $("#menuName");
        var cityOffset = $("#menuName").offset();
        var editformOffset = $("#editform").offset();
        $("#menuContent").css({ left: cityOffset.left - editformOffset.left + "px", top: (cityOffset.top + cityObj.outerHeight() + 6) - editformOffset.top + "px" }).slideDown("fast");
        $("body").bind("mousedown", onBodyDown);
    }

    function hideMenu() {
        $("#menuContent").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }

    function onBodyDown(event) {
        if (!(event.target.id === "menuBtn" || event.target.id === "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
            hideMenu();
        }
    }

    $(document).ready(function () {
        //判断是否具有筛选菜单条件
        var postUrl = "/Common/UserControl/GetMenuRemoveChildren";
        UtilAjaxPostAsync(postUrl, {
            menuId: $("#MenuId").val(),
            isRemove: false
        }, function (data) {
            combotreeMenuTreeObj = $.fn.zTree.init($("#menuTree"), setting, data);
        });
        $('#searchMenu').on("click", function (e) {
            search($("#searchMenuKey").val());
        });

        $('#searchMenuKey').on("keyup", function (e) {
            search($(this).val());
        });
    });
    var combotreeMenuTreeObj = null;

    function search(p) {
        if (combotreeMenuTreeObj) {
            var rootNodes = combotreeMenuTreeObj.getNodes(),
                allNodes = combotreeMenuTreeObj.transformToArray(rootNodes),
                checkedNodes = combotreeMenuTreeObj.getCheckedNodes(true);
            $.each(checkedNodes, function () {
                combotreeMenuTreeObj.checkNode(this, false);
            });
            combotreeMenuTreeObj.cancelSelectedNode();
            if (p) {
                combotreeMenuTreeObj.hideNodes(allNodes);
                var nodes = combotreeMenuTreeObj.getNodesByParamFuzzy('name', p),
                    parentNode,
                    o = {};
                $.each(nodes, function (i, node) {
                    if (!node.isParent) {
                        parentNode = node.getParentNode();
                        o[node.tId] = node;
                        while (parentNode) {
                            o[parentNode.tId] || (o[parentNode.tId] = parentNode);
                            parentNode = parentNode.getParentNode();
                        }
                    }
                    return true;
                });
                $.each(o, function (key, value) {
                    combotreeMenuTreeObj.showNode(value);
                });
                $.each(rootNodes, function (i, node) {
                    node.isParent && o[node.tId] && combotreeMenuTreeObj.expandNode(node, true, true);
                });
            } else {
                combotreeMenuTreeObj.showNodes(allNodes);
                combotreeMenuTreeObj.expandAll(false);
            }
        }
    }

</script>